<template>
	<view>
		<view class="status_bar">
		    <!-- 这里是状态栏 -->
		</view>
		<view class="uni-flex uni-row" style="width: 100%;margin-top: 10x;">
			<view class="uni-center text" :class="oprationtype == '0' ? 'active' : 'unactive'" id="0" @click="changeop">抢单</view>
			<view class="uni-center text" :class="oprationtype == '1' ? 'active' : 'unactive'" id="1" @click="changeop">汇总</view>
			<view class="uni-center text" :class="oprationtype == '2' ? 'active' : 'unactive'" id="2" @click="changeop">申请</view>
		</view>
		<!-- 待抢单列表 -->
		<view  v-if="getfinish&&oprationtype=='0'" class="activity_main" style="width: 95%;margin-top: 15px; margin-left: 10px;">
			<view v-if="activity_list.length==0" style="width: 100%;text-align: center;margin-top: 30px;font-size: 20px;font-weight: 300;">
				还未获得导师权限～
			</view>
			<view v-for="(activity,index) in activity_list" class="shadow" style="width: 45%;height: 250px;border-radius: 5px;margin: 8px;">
				<image mode='aspectFill' :src="httpurl+activity.a_cover" style="height: 165px;width: 165px;" @click="activity_detail(activity.a_id,'0')"></image>
				<view style="margin-top: 10px; margin-left: 10px;font-weight: 500;">{{activity.a_name}}</view>
				<view style="margin-left: 10px;font-size: 13px;color: #f8af41;" >{{gettimerange(activity.a_start_time,activity.a_end_time)}}</view>
				<view style="margin-left: 10px;font-size: 13px;color: #808080;">{{activity.type_name}}</view>
			</view>
		</view>
		<!-- 已抢单汇总 -->
		<view v-if="getfinish1&&oprationtype=='1'" style="width: 100%;display: flex;flex-direction: column;margin-top: 20px;">
			<view v-for="(a,index) in summary_list" class="shadow" style="width: 90%;align-self: center;display: flex;flex-direction: row;justify-content:space-between;margin-bottom: 15px;">
				<view style="width: 50%;"><image mode='aspectFill' :src="httpurl+a.a_cover" style="height: 130px;width: 160px;" @click="activity_detail(a.a_id,'1')"></image></view>
				<view style="width: 50%;">
					<view style="margin-top: 10px; margin-left: 10px;font-weight: 500;">{{a.a_name}}</view>
					<view style="margin-left: 10px;font-size: 13px;color: #f8af41;" >{{gettimerange(a.a_start_time,a.a_end_time)}}</view>
					<view style="margin-left: 10px;font-size: 13px;color: #808080;">{{a.type_name}}</view>
					<view v-if="a.is_end=='0'" style="margin-left: 10px;font-size: 20px;font-weight: 300;margin-top: 15px;">进行中</view>
					<view v-if="a.is_end=='1'" style="margin-left: 10px;font-size: 20px;font-weight: 300;margin-top: 15px;">{{'+'+a.a_reward}}</view>
				</view>
			</view>
			<!-- 汇总 -->
			<view  style="width: 90%;align-self: center;margin-top: 10px;">
				<uni-title  type="h1" align="right" :title="'共抢单：'+summary_num+'次'"></uni-title>
				<uni-title type="h1" align="right" :title="'总共收到津贴：'+summary_sum+'元'"></uni-title>
			</view>
			
		</view>
		<!-- 申请导师 -->
		<view v-if="getfinish2&&oprationtype=='2'" style="width: 100%;display: flex;flex-direction: column;margin-top: 20px;">
			<view v-for="(apply,index) in applies" :class="index == 0 ? 'top':'notop'" @click="goto_applyDetail(apply.apply_id)" style="width: 85%;align-self: center;display: flex;flex-direction: row;justify-content:space-between;padding-bottom:15px;padding-top:15px;border-bottom:solid #e6e6e6 0.7px;font-size: 14px;font-weight: 300;">
				<view>{{gettime(apply.apply_time)}}</view>
				<view>{{getTeacher(apply.type_name)}}</view>
				<view class="tag-view" v-if="apply.is_pass=='1'" >
					<uni-tag :inverted="true" text="通过" type="success" />
				</view>
				<view class="tag-view" v-if="apply.is_pass=='2'" >
					<uni-tag :inverted="true" text="拒绝" type="error" />
				</view>
				<view class="tag-view" v-if="apply.is_pass=='0'" >
					<uni-tag :inverted="true" text="等待" type="warning" />
				</view>
			</view>		
		</view>
		<uni-fab v-if="oprationtype=='2'"
			:pattern="pattern"
			:popMenu="popMenu"
			horizontal="right"
			vertical="bottom"
			direction="horizontal"
			@fabClick="addclick">
		</uni-fab>
		
		<view v-if="isadd&&oprationtype=='2'" class="box shadow" style="display: flex;flex-direction: column;height: 230px; width: 75%;">
			<view style="align-self: center;width: 75%;margin-top: 20px;">
				<uni-title type="h2" align="left" title="请选择导师类型:"></uni-title>
			</view>
			<view class="shadow uni-flex" style="align-self: center;text-align: center;width: 75%; height: 40px; border-radius: 5px;margin-top: 20px;">
				<picker @change="typeChange" :value="type_index" :range="type_array" style="align-self: center;margin: 0 auto;">
					<view >{{type_array[type_index]}}</view>
				</picker>
			</view>
			<view style="display: flex;flex-direction: column;text-align: center;margin-top: 40px;">
				<view class="addbtn" @click="apply()">申请</view >
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				httpurl: getApp().globalData.weburl, //app.vue中定义的全局变量，后端ip地址
				oprationtype:'0',
				activity_list:[],
				summary_list:[],
				applies:[],
				summary_num:'',
				summary_sum:'',
				getfinish:false,
				getfinish1:false,
				getfinish2:false,
				isadd:false,
				type_array: [],
				type_array_index:[],
				type_index: 0,
				pattern: {
					color: '#6666ff',
					backgroundColor: '#6666ff',
					selectedColor: '#FFFFFF',
					buttonColor:'#5aa7ff'
				},
				popMenu:false,
			}
		},
		computed:{
			gettimerange() {
			    return (time1,time2) => {
					return time1.substr(5, 5)+"至"+time2.substr(5, 5);
			    }
			},
			gettime(){
				return (time1) => {
					return time1.substr(5, 11);
				}
			},
			getTeacher(){
				return (s) => {
					return s.replace("活动","导师");
				}
			},
			
		},
		created(){
			this.getBookActivity();
			this.getBookedActivity();
			this.getMyApply();
			this.getAllType();
		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			this.getBookActivity();
			this.getBookedActivity();
			this.getMyApply();
			this.getAllType();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			goto_applyDetail(apply_id){
				console.log("点击");
				uni.navigateTo({
					url:"../apply_detail/apply_detail?apply_id="+apply_id
				});
			},
			typeChange(e){
				console.log('type选择改变，携带值为', e.detail.value)
				this.type_index = e.detail.value;
			},
			getAllType(){
				var that=this;
				uni.request({
				    url: that.httpurl+'getAllType/', //服务器地址+接口名
				    data: {
			
				    },
					method: 'POST',
				    header: { 
						'X-Requested-With': 'XMLHttpRequest',
						"Accept": "application/json",
						"Content-Type": "application/json; charset=UTF-8"
					},
					dataType: 'json',
				    success: (res) => {
						console.log("request success");
				        console.log(res.data);
						var typelist=res.data.allType;
						that.type_array_index = typelist;
						var type_name_list=[];
						for(var i=0;i<typelist.length;i++){
							type_name_list.push(typelist[i].type_name);
						}
						that.type_array = type_name_list;
						
				    },
					fail: (res) => {
						console.log("request fail");
				    },
				});
			},
			cancel_apply(){
				this.isadd=false;
			},
			apply(){
				var type_id = this.type_array_index[this.type_index].type_id;
				var that=this;
				uni.request({
				    url: that.httpurl+'applyTeacher/', //服务器地址+接口名
				    data: {
						s_id:getApp().globalData.userid,
						type_id:type_id
				    },
					method: 'POST',
				    header: { 
						'X-Requested-With': 'XMLHttpRequest',
						"Accept": "application/json",
						"Content-Type": "application/json; charset=UTF-8"
					},
					dataType: 'json',
				    success: (res) => {
						console.log("request success");
				        console.log(res.data);
						uni.showToast({
							title: "申请成功",
							icon: 'none'
						});
						that.isadd=false;
						that.getMyApply();
				    },
					fail: (res) => {
						console.log("request fail");
				    },
				});
			},
			addclick(){
				console.log("点击了申请");
				this.isadd=!this.isadd;
			},
			changeop(e){
				console.log("切换选项为："+e.currentTarget.id);
				this.oprationtype=e.currentTarget.id;
			},
			activity_detail(id,isbook){
				console.log("点击");
				uni.navigateTo({
					url:"../activity_book/activity_book?a_id="+id+"&isbook="+isbook
				});
			},
			getMyApply(){
				var that=this;
				uni.request({
				    url: that.httpurl+'getStudentHistoryApply/', //服务器地址+接口名
				    data: {
						s_id:getApp().globalData.userid,
				    },
					method: 'POST',
				    header: { 
						'X-Requested-With': 'XMLHttpRequest',
						"Accept": "application/json",
						"Content-Type": "application/json; charset=UTF-8"
					},
					dataType: 'json',
				    success: (res) => {
						console.log("request success");
				        console.log(res.data);
						that.applies=res.data.applies;
						that.getfinish2=true;
				    },
					fail: (res) => {
						console.log("request fail");
				    },
				});
			},
			getBookedActivity(){
				var that=this;
				uni.request({
				    url: that.httpurl+'getBookedActivity/', //服务器地址+接口名
				    data: {
						s_id:getApp().globalData.userid,
				    },
					method: 'POST',
				    header: { 
						'X-Requested-With': 'XMLHttpRequest',
						"Accept": "application/json",
						"Content-Type": "application/json; charset=UTF-8"
					},
					dataType: 'json',
				    success: (res) => {
						console.log("request success");
				        console.log(res.data);
						that.summary_list = res.data.summary_list;
						that.summary_num = res.data.num;
						that.summary_sum = res.data.sum;
						that.getfinish1=true;
				    },
					fail: (res) => {
						console.log("request fail");
				    },
				});
			},
			getBookActivity(){
				var that=this;
				uni.request({
				    url: that.httpurl+'getBookActivity/', //服务器地址+接口名
				    data: {
						s_id:getApp().globalData.userid
				    },
					method: 'POST',
				    header: { 
						'X-Requested-With': 'XMLHttpRequest',
						"Accept": "application/json",
						"Content-Type": "application/json; charset=UTF-8"
					},
					dataType: 'json',
				    success: (res) => {
						console.log("request success");
				        console.log(res.data);
						that.activity_list = res.data.book_activity;
						that.getfinish=true;
				    },
					fail: (res) => {
						console.log("request fail");
				    },
				});
			}
		}
	}
</script>

<style>
	.status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }
	.active{
		border-bottom:2px solid #528FFF;
		color:#528FFF;
		font-weight: 450;
	}
	.unactive{
		color:#666666;
	}
	.text {
		margin: 15rpx 15rpx;
		padding: 0 5rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 30rpx;
		width: 30%;
	}
	.shadow{
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, .3);
	}	
	.activity_main{
		/* 定义flex容器 */
		display: flex;
		 /*设置容器内部容器的排列方向*/	
		flex-direction: row;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	.top{
		border-top:solid #e6e6e6 0.7px;
	}
	.notop{
		
	}
	.box{
		
		//重点是以下规则
		position:absolute;
		top:5%;
		left:0px;
		bottom:0px;
		right:0px;
		margin:auto;
		border-radius: 15px;
		background-color: #ffffff;
	}
	.addbtn{
		width: 75%;
		height: 40px;
		align-self: center;
		color: white;
		background-color: #528FFF;
		border-radius:15px;
		line-height: 40px;
	}
	
</style>
